<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="宠物名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getUsers">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">处理</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--列表-->
        <el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" label="编号" width="60">
            </el-table-column>
            <el-table-column prop="name" label="宠物名" >
            </el-table-column>
            <el-table-column prop="title" label="标题" >
            </el-table-column>
            <el-table-column prop="user.phone" label="用户" >
            </el-table-column>
            <el-table-column prop="price" label="价格" >
            </el-table-column>
            <!--formatter：格式化数据-->
            <el-table-column prop="age" label="年龄"  >
            </el-table-column>
            <el-table-column prop="gender" label="性别" >
                <template scope="scope">
                    <span v-if="scope.row.gender==0">母</span>
                    <span v-if="scope.row.gender==1">公</span>
                </template>
            </el-table-column>
            <el-table-column prop="coat_color" label="毛色" >
            </el-table-column>
            <el-table-column prop="address" label="地址" >
            </el-table-column>
            <el-table-column prop="petType.name" label="品种" >
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="total, sizes, prev, pager, next, jumper"
                           @current-change="handleCurrentChange"
                           @size-change="handleSizeChange"
                           :current-page="currentPage"
                           :page-size="pageSize"
                           :page-sizes="pageSizes"
                           :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--新增界面-->
        <el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="80px" >
                <el-form-item label="宠物名" prop="name">
                    <el-input v-model="addForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="成本价" prop="costprice">
                    <el-input v-model="addForm.costprice" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="售价" prop="saleprice">
                    <el-input v-model="addForm.saleprice" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item  label="资源">
                    <el-upload
                            class="upload-demo"
                            action="/api/fastDfs"
                            :on-remove="handleRemove"
                            :on-success="handleSuccess"
                            :file-list="fileList"
                            list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="简介" prop="intro">
                    <quill-editor :options="editorOption" v-model="addForm.intro"></quill-editor>
                </el-form-item>
                <el-form-item label="预约须知" prop="orderNotice">
                    <quill-editor :options="editorOption" v-model="addForm.adoptNotice"></quill-editor>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import { quillEditor } from 'vue-quill-editor'
    import quillOption from '../../common/js/quill-config'
    export default {
        components: {
            quillEditor
        },
        data(){
            return{
                fileList: [],
                editorOption: quillOption,
                addFormVisible:false,
                users:[],//双向绑定 列表数据
                listLoading: false, //加载框
                sels:[],  //列表选中项
                currentPage:1,//当前页
                pageSize:5,//默认显示每页条数
                pageSizes:[5,10,10], //每页条数
                total:0,//总条数
                filters:{
                    name:''
                },
                addForm:{
                    //寻主信息id
                    messageId: "",
                    //宠物名
                    name: "",
                    //销售价格
                    saleprice: "",
                    //成本价
                    costprice: "",
                    //图片资源
                    resources: "",
                    //宠物详情
                    intro: "",
                    //宠物领养须知
                    adoptNotice: "",
                    //宠物类型id(品种)
                    typeId: ""
                }
            }
        },
        methods:{
            //上传成功调用此函数
            handleSuccess(response, file, fileList){
                for(var i=0;i<fileList.length;i++){
                    //获取具体的file对象
                    var fileObj = fileList[i];
                    //如果有值证明新增
                    if(fileObj.response){
                        //新增是这样来取url地址
                        var url = fileObj.response.result;
                        if(i == 0){
                            this.addForm.resources = url;
                        }else{
                            this.addForm.resources = this.addForm.resources + "," + url;
                        }
                    }else{
                        //拿到图片的url地址
                        var url = fileObj.url;
                        if(i == 0){
                            http://127.0.0.1/gropu/dsdsfds/43.jpg
                                this.addForm.resources = url.substring(this.fdfsUrl.length);
                        }else{
                            this.addForm.resources = this.addForm.resources + "," + url.substring(this.fdfsUrl.length);
                        }
                    }
                }
            },
            handleRemove(file, fileList) {
                //思路:先通过file把它作为参数传递到后台进行删除，然后再重新设置resouces的值
                var url = "";
                if(file.response){//新增通过response来获取值
                    url = file.response.result;
                }else{
                    url = file.url.substring(this.fdfsUrl.length);
                }
                let param = {"url": url};

                //服务器删除附件
                this.$http.post("/fastDfs/delete", param).then((res => {
                    //如果删除成功
                    if(res.data.success){
                        //如果没有图片了，我就给资源设置路径为""
                        if(fileList.length == 0){
                            this.addForm.resources = "";
                            return;
                        }
                        //否则循环路径，冬天拼接resources的值
                        for(var i=0;i<fileList.length;i++){
                            //获取具体的file对象
                            var fileObj = fileList[i];
                            if(fileObj.response){
                                //单张图片的url
                                var url = fileObj.response.result;
                                if(i == 0){
                                    this.addForm.resources = url;
                                }else{
                                    this.addForm.resources = this.addForm.resources + "," + url;
                                }
                            }else{
                                var url = fileObj.url;
                                if(i == 0){
                                    this.addForm.resources = url.substring(this.fdfsUrl.length);
                                }else{
                                    this.addForm.resources = this.addForm.resources + "," +  url.substring(this.fdfsUrl.length);
                                }
                            }
                        }
                    }

                }));
            },
            //当页码发生改变时 触发
            handleCurrentChange(val){
                this.currentPage = val;
                this.loadMessage();
            },
            //当每页条数发生变化时 触发
            handleSizeChange(val){
                this.currentPage = 1;
                this.pageSize = val;
                this.loadMessage();
            },
            selsChange(sels){
                this.sels = sels;
            },
            //批量删除
            batchRemove(){
                var ids = this.sels.map(item => item.id);
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.$http.patch("/employee/batchDelEmployee",ids).then((res) => {
                        if(res.data.success){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.loadMessage();
                        }else {
                            this.$message.error(res.data.msg)
                        }
                    });
                }).catch(() => {

                });
            },
            //编辑按钮
            handleEdit(index,row){
                this.addFormVisible = true;
                console.debug("编辑按钮",row);
                //回显
                for(var k in row){
                    this.addForm[k] = row[k]
                }
            },
            //删除按钮
            handleDel(index,row){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("/employee/"+row.id).then((res) => {
                        if(res.data.success){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.loadMessage();
                        }else {
                            this.$message.error(res.data.msg)
                        }
                    });
                }).catch(() => {

                });
            },
            //模糊查询 按钮
            getUsers(){
                this.loadMessage();
            },
            //处理 按钮
            handleAdd(){
                var ids = this.sels.map(item => item.id);
                if(!ids.length){
                    this.$message({
                        message: '请选中数据进行处理!!',
                        type: 'error'
                    });
                    return;
                }
                if(ids.length>=2){
                    this.$message({
                        message: '一次性只能处理一条数据!!',
                        type: 'error'
                    });
                    return;
                }
                //获取选中行的数据
                let row = this.sels[0];
                this.addForm.typeId =row.petType.id
                this.addForm.messageId = row.id;
                this.addForm.name = row.name;
                this.addForm.costprice = row.price;
                this.addForm.saleprice = row.price;
                this.addForm.resources = row.resources;
                if(row.resources){
                    //以逗号截取字符串
                    var imgArr = row.resources.split(",");
                    //循环迭代图片所有的路径
                    for(var i=0;i<imgArr.length;i++){
                        this.fileList.push({"url": this.fdfsUrl + imgArr[i]});
                    }
                }
                //弹开窗体
                this.addFormVisible = true;
            },
            //加载员工列表
            loadMessage(){
                let partm = {
                    "currentPage":this.currentPage,
                    "pageSize":this.pageSize,
                    "username":this.filters.name
                };
                this.$http.patch("/searchMaster/loadMessage",partm).then((res => {
                    this.users = res.data.list;
                    this.total = res.data.total;
                    console.debug("加载员工列表",res);
                }));
            },
            //添加 修改 模态框确认按钮
            addSubmit(){
                let para = Object.assign({},this.addForm);
                //宠物详情
                let petDetail = {
                    "adoptNotice":para.adoptNotice,
                    "intro":para.intro
                }
                //设置宠物详情
                para.petDetail = petDetail;
                //宠物寻主信息对象
                let searchMasterMessage = {
                    id: para.messageId
                };
                //设置宠物寻主信息对象
                para.searchMasterMessage = searchMasterMessage;
                //设置宠物类型对象
                let type = {
                    id: this.addForm.typeId
                };
                para.type = type;
                this.$http.post("/searchMaster/handleMessage",para).then((res => {
                    if(res.data.success){
                        this.addFormVisible=false;
                        this.loadMessage();
                    }else {
                        this.$message.error(res.data.msg);
                    }
                }));
            }
        },
        mounted(){
            this.loadMessage();
        }
    }
</script>